/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
$(document).ready(function() {
$('a.show_popup').click(function() {

    //Getting the variable's value from a link
    var loginBox = $(this).attr('href');

    //Fade in the Popup
    $(loginBox).fadeIn(300);

    //Set the center alignment padding + border see css style
    var popMargTop = ($(loginBox).height() + 24) / 2;
    var popMargLeft = ($(loginBox).width() + 24) / 2;

    $(loginBox).css({
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });

    // Add the mask to body
    $('body').append('<div class="overlay"></div>');
    $('.overlay').fadeIn(300);

    return false;
});

    // When clicking on the button close or the overlay layer the popup closed
    $('a.close, .overlay').live('click', function() {
        $('.overlay , .popup').fadeOut(300 , function() {
            $('.overlay').remove();
        });
        return false;
    });
});
